/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useCallback } from "react";
import { Button, Row, Col, Form, Cascader } from "antd";
import { useSelector } from "dva";

const FormItem = Form.Item;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 20 },
  },
};

const ChangeCourier = ({
  form,
  isOperator,
  name,
  account,
  address,
  id,
  type, // courier | dak
  onCancel = () => {},
  onConfirm = () => {},
}) => {
  const { getFieldDecorator, validateFields } = form;
  const courierInfo = useSelector(({ clientManage = {} }) => clientManage.cascaderInfo) || {};

  const displayRender = label => label[1];

  const filter = (inputValue, path) => {
    return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
  };

  const onSubmit = useCallback(
    () => {
      validateFields((err, value) => {
        if (err) return;
        const { courier_phone = [] } = value;
        onConfirm && onConfirm({ account: courier_phone[1], qrcode_id: id, type });
        onCancel && onCancel();
      });
    },
    [validateFields, onConfirm, id, onCancel, type]
  );

  return (
    <Form {...formItemLayout} style={{ marginTop: 20 }}>
      {/* <FormItem {...tailFormItemLayout}>
            <Title level={2}>此揽件二维码正在更换对应业务员</Title>
          </FormItem> */}
      <FormItem label="现在">
        <Row type="flex" justify="space-between">
          <Col>
            <span>
              二维码对应
              {isOperator ? "业务员" : "快宝驿站"}：
            </span>
            <span>{name}</span>
          </Col>
          <Col>
            <span>账号：</span>
            <span>{account}</span>
          </Col>
          <Col>
            <span>{isOperator ? "站点" : "地址"}：</span>
            <span>{address}</span>
          </Col>
        </Row>
      </FormItem>
      <FormItem label="更换为业务员">
        {getFieldDecorator("courier_phone", {
          rules: [
            {
              required: true,
              message: "请输入或选择业务员姓名！",
            },
          ],
        })(
          <Cascader
            style={{ width: "50%" }}
            expandTrigger="click"
            options={courierInfo}
            displayRender={displayRender}
            placeholder="可根据业务员手机、姓名搜索"
            showSearch={{ filter }}
          />
        )}
      </FormItem>
      <Row type="flex" justify="center" gutter={[30]}>
        <Col>
          <Button onClick={onCancel}>取消</Button>
        </Col>
        <Col>
          <Button onClick={onSubmit} type="primary">
            确定
          </Button>
        </Col>
      </Row>
    </Form>
  );
};

export default Form.create()(ChangeCourier);
